<template>
	<view>
		<navigation-bar :back="true" title="圈子详情"></navigation-bar>
		<view style="position: relative; height: 100%">
			<view style="padding: 30rpx">
				<view class="qz1">
					<view class="qz2">
						<view class="qz3">
							<view class="qz4">
								<image class="qz5" :src="forumDetail.head"></image>
							</view>
							<view class="qz6">
								<view class="qz7">{{ forumDetail.name }}</view>
								<view class="qz8">
									<view class="qz9">{{ forumDetail.createTime }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="qz12">{{ forumDetail.title }}</view>
					<view class="qz13"><rich-text :nodes="forumDetail.content"></rich-text></view>
					<view class="qz14" v-if="forumDetail.image && forumDetail.image.length > 0">
						<view class="qz15" v-if="typeof forumDetail.image === 'string'">
							<image :src="forumDetail.image" mode="aspectFill"></image>
						</view>
						<template v-else>
							<view class="qz15" v-for="(url, index) in forumDetail.image" :key="index">
								<image :src="url" mode="aspectFill"></image>
							</view>
						</template>
					</view>
					<view class="qz16">
						<view class="qz17">{{ forumDetail.gamename }}</view>
						<view class="qz18" v-if="forumDetail.tag1">#{{ forumDetail.tag1 }}</view>
						<view class="qz18" v-if="forumDetail.tag2">#{{ forumDetail.tag2 }}</view>
						<view class="qz18" v-if="forumDetail.tag3">#{{ forumDetail.tag3 }}</view>
					</view>
					<view class="qz19">
						<!-- 浏览量 -->
						<view class="qz20">
							<image src="/static/images/qz4.png" class="qz22"></image>
							<view class="qz23">{{ forumDetail.num1 }}</view>
						</view>
						<view class="qz21">
							<view class="qz20">
								<image src="/static/images/report.png" class="report"
									@click.stop="opentiereport(forumDetail)">
								</image>
							</view>
							<!-- 评论量 -->
							<view class="qz20">
								<image src="/static/images/qz2.png" class="qz22"></image>
								<view class="qz23">{{ forumDetail.num2 }}</view>
							</view>
							<!-- 点赞量 -->
							<view class="qz20" style="margin-left: 40rpx">
								<image v-if="this.likeStatus===false" src="/static/images/qz3.png" class="qz22"
									@tap="addForumLike"></image>
								<image v-else src="/static/images/qz3s.png" class="qz22" @tap="addForumLike"></image>
								<view class="qz23">{{ forumDetail.num3 }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view style="margin: 30rpx; text-align: center; color: var(--GColor); display: flex; align-items: center">
				<view style="height: 2rpx; background-color: #ddd; flex: 1"></view>
				<view style="height: 2rpx; background-color: #ddd; flex: 1"></view>
			</view>

			<view class="f1">
				<view class="f2">共{{ forumDetail.num2 }}条评论</view>
			</view>
			<view style="display: flex; margin: 0 30rpx; margin-top: 30rpx">
				<input
					style="width: 100%; background: #eee; height: 60rpx; margin-right: 30rpx; border-radius: 100rpx; padding: 0 20rpx"
					@input="onChange" :value="inputText" placeholder="评论" />
				<view class="f3" @tap="uploadForum">发表评论</view>
			</view>

			<view class="qz1" style="margin: 30rpx">
				<view class="f4" :style="replayData.length == index + 1 ? 'border:none' : ''"
					v-for="(item, index) in replayData" :key="index">
					<view class="f5">
						<view class="f6">
							<image class="f7" :src="item.head"></image>
						</view>
						<view class="f8">
							<view class="f9">{{ item.name }}</view>
							<view class="f12"><rich-text :nodes="item.content"></rich-text></view>
							<view class="f10">
								<view class="f11">{{ item.createTime }}</view>
								<image src="/static/images/report.png" class="pinglun-report"
									@click.stop="openpingreport(item)">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view style="text-align: center; color: var(--GColor); display: flex; align-items: center">
					<view style="height: 2rpx; background-color: #ddd; flex: 1"></view>
					<view>没有更多了</view>
					<view style="height: 2rpx; background-color: #ddd; flex: 1"></view>
				</view>
			</view>
			<view style="height: 50rpx; margin-top: 50rpx">.</view>
		</view>
		<!-- 添加自定义登录提示框 -->
		<CustomConfirm :visible.sync="showLoginConfirm" title="温馨提示" content="亲，您还没登录，请先登录~"
			@confirm="handleLoginConfirm" @cancel="handleLoginCancel" />

		<report v-if="reportstore.showreport" />
	</view>
</template>

<script>
	import report from '../../components/report/report.vue'
	import storereport from '../../store/report.js'
	import CustomConfirm from '../../components/CustomConfirm/CustomConfirm.vue';
	import loginStatusUtils from '../../utils/loginStatusUtils';
	import navigationBar from '../../components/navigation-bar/navigation-bar.vue'
	import {
		addForumLikeAdd,
		getForumById,
		getForumReplay,
		pushForumReplay,
		getForumLikeStatus
	} from '../../api/getApi';
	import userInfo from '../../store/userInfo';

	export default {
		components: {
			navigationBar,
			CustomConfirm
		},
		data() {
			return {
				reportstore: storereport,
				forumDetail: {
					id: '',
					head: '',
					name: '',
					createTime: '',
					title: '',
					content: '',
					image: '',
					gamename: '',
					tag1: '',
					tag2: '',
					tag3: '',
					num1: '',
					num2: '',
					num3: '',
				},
				likeStatus: false,
				replayData: [],
				myGame: [],
				inputText: '',
				urls: [],
				showLoginConfirm: false, //登录提示框是否显示
				showDeleteConfirm: false
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad(options) {
			// 获取页面详细信息
			/* getForumById(this.forumDetail.id).then((res) => {
			    console.log(res);
			    this.setData({
			        forumDetail: res.data
			    });
			}); */
			this.getForumDetail();
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {
			this.getForumDetail();
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			let myGame = uni.getStorageSync('myGame');
			if (!myGame) {
				myGame = [];
			} else {
				myGame = JSON.parse(myGame).slice(0, 20);
			}

			let forumDetail = uni.getStorageSync('forumDetail');
			if (forumDetail) {
				forumDetail = JSON.parse(forumDetail);

				// 处理图片数据
				if (forumDetail.image && typeof forumDetail.image === 'string') {
					forumDetail.image = forumDetail.image.split(',');
				}

				this.setData({
					forumDetail: forumDetail,
					myGame: myGame
				});
			}

			this.getData();
		},
		onHide() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {},
		methods: {
			opentiereport(item) {
				// console.log(item);
				this.reportstore.reportitem = item;
				this.reportstore.setreporttype("帖子");
				this.reportstore.show();
			},
			openpingreport(item) {
				// console.log(item);
				this.reportstore.reportitem = item;
				this.reportstore.setreporttype("评论");
				this.reportstore.show();
			},
			// 获取页面详细信息
			getForumDetail() {

				// 获取帖子点赞状态
				getForumLikeStatus(this.forumDetail.id).then((res) => {
					console.log("获取帖子点赞状态：", res);
					if (res.code === 0) {
						this.likeStatus = res.data;
					}
					console.log("帖子点赞状态：", this.likeStatus);
				});

				// 获取帖子详情
				getForumById(this.forumDetail.id).then((res) => {
					console.log(res);
					// 处理返回的数据
					if (res.code === 0) {
						let forumData = res.data;

						// 处理图片数据
						if (forumData.image && typeof forumData.image === 'string') {
							forumData.image = forumData.image.split(',');
						}

						this.setData({
							forumDetail: forumData
						});
					}
				});
			},
			// 点赞
			addForumLike() {
				if (!loginStatusUtils.checkLoginAndShowConfirm(this)) {
					return;
				}
				addForumLikeAdd(this.forumDetail.id).then((res) => {
					if (res.code === 0) {
						// 切换点赞状态
						// this.forumDetail.likeStatus = !this.forumDetail.likeStatus; // 切换状态
						// 重新获取数据以更新显示
						this.getForumDetail();
						// 更新点赞数量
						// this.forumDetail.num3 += this.forumDetail.likeStatus ? 1 : -1; // 根据状态更新数量

					}
				});
			},
			//登录提示框确认事件
			handleLoginConfirm() {
				uni.navigateTo({
					// 跳进登录页面
					url: '/pages/login/login'
				});
			},
			//登录提示框取消事件
			handleLoginCancel() {
				this.showLoginConfirm = false;
			},
			getData() {
				getForumReplay({
					page: 1,
					limit: 99,
					forumid: this.forumDetail.id
				}).then((res) => {
					this.setData({
						replayData: res.data.list
					});
				});
			},

			// 发表评论
			uploadForum() {
				// 检查登录状态
				if (!loginStatusUtils.checkLoginAndShowConfirm(this)) {
					return;
				}
				if (this.inputText.length < 1) {
					uni.showToast({
						title: '沉默是金，闷声发大财',
						icon: 'none'
					});
					return;
				}
				if (this.checkFFGame()) {
					return;
				}
				// let userData = JSON.parse(uni.getStorageSync('userData'));
				let userData = userInfo.getUserInfo();
				let pushData = {
					// openid: uni.getStorageSync('openId'),
					forumid: this.forumDetail.id,
					head: userData.avatarUrl,
					name: userData.name,
					content: this.inputText,
				};
				pushForumReplay(pushData).then((res) => {
					uni.showToast({
						title: res,
						icon: 'none'
					});
					// 刷新评论列表
					// this.getData();
					//刷新页面
					uni.reLaunch({
						url: '/pages/forumDetail/forumDetail?id=' + this.forumDetail.id
					});
					if (res == '禁止发表非法内容，如多次违反将永久封禁') {
						let ffCount = uni.getStorageSync('ffCount') ? Number(uni.getStorageSync('ffCount')) : 0;
						ffCount = ffCount + 1;
						uni.setStorageSync('ffCount', ffCount);
					}
				});
			},

			checkFFGame() {
				let ffCount = uni.getStorageSync('ffCount') ? Number(uni.getStorageSync('ffCount')) : 0;
				if (ffCount > 10) {
					uni.showModal({
						title: '提示',
						content: '你因为多次恶意非法上传，已被禁止发布'
					});
					return true;
				}
				if (ffCount > this.myGame.length) {
					uni.showModal({
						title: '提示',
						content: '你因多次尝试上传非法内容，为防止恶意上传，你还需要再玩 ' + (ffCount - this.myGame.length) +
							' 款不同的游戏后才可继续上传发布'
					});
					return true;
				}
				return false;
			},

			onChange(e) {
				this.setData({
					inputText: e.detail.value
				});
			}
		}
	};
</script>
<style>
	.qz1 {
		display: flex;
		flex-direction: column;
		padding: 25rpx;
		border-radius: 25rpx;
		background: white;
		margin-bottom: 30rpx;
	}

	.qz2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.qz3 {
		display: flex;
		flex: 1;
	}

	.qz4 {
		width: 85rpx;
		height: 85rpx;
		border-radius: 100%;
	}

	.qz5 {
		width: 100%;
		height: 100%;
		border-radius: 100%;
	}

	.qz6 {
		display: flex;
		flex-direction: column;
		margin-left: 25rpx;
		justify-content: space-around;
	}

	.qz7 {
		font-weight: blod;
		font-size: 30rpx;
	}

	.qz8 {
		display: flex;
		font-size: 24rpx;
		color: gray;
	}

	.qz9 {
		margin-right: 5rpx;
	}

	.qz10 {
		margin-left: 30rpx;
	}

	.qz11 {
		width: 40rpx;
		height: 40rpx;
	}

	.qz11>image {
		width: 100%;
		height: 100%;
	}

	.qz12 {
		font-size: 32rpx;
		font-weight: bold;
		margin: 20rpx 0;
	}

	.qz13 {
		font-size: 27rpx;
		margin-bottom: 15rpx;
	}

	.qz14 {
		display: flex;
		gap: 20rpx;
		padding: 10rpx 0;
		flex-wrap: wrap;
	}

	.qz15 {
		width: 200rpx;
		height: 200rpx;
		object-fit: cover;
		border-radius: 15rpx;
		background: #f5f5f5;
	}

	.qz15>image {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.qz16 {
		display: flex;
		align-items: center;
		margin-top: 25rpx;
	}

	.qz17 {
		color: gray;
		font-size: 25rpx;
	}

	.qz18 {
		margin-left: 25rpx;
		font-size: 23rpx;
		border: 2rpx solid var(--LColor50);
		padding: 7rpx 15rpx;
		border-radius: 30rpx;
		color: var(--Color);
		background: var(--LColor20);
	}

	.qz19 {
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-bottom: 5rpx;
	}

	.qz20 {
		display: flex;
		align-items: flex-end;
	}

	.qz21 {
		display: flex;
	}

	.report {
		width: 25rpx;
		height: 25rpx;
		transform: translateY(-10%) translateX(-200%);
	}

	.qz22 {
		width: 30rpx;
		height: 30rpx;
	}

	.qz23 {
		color: gray;
		font-size: 25rpx;
		margin-left: 15rpx;
	}

	.f1 {
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.f2 {
		color: black;
	}

	.f3 {
		font-size: 26rpx;
		border: 2rpx solid var(--LColor50);
		padding: 0rpx 15rpx;
		border-radius: 100rpx;
		color: var(--Color);
		background: var(--LColor20);
		word-break: keep-all;
		line-height: 56rpx;
		height: 56rpx;
	}

	.f4 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #eee;
	}

	.f4:last-child {
		border-bottom: none;
	}

	.f5 {
		display: flex;
		flex: 1;
		padding: 30rpx 0;
	}

	.f6 {
		width: 85rpx;
		min-width: 85rpx;
		height: 85rpx;
		border-radius: 100%;
	}

	.f7 {
		width: 100%;
		height: 100%;
		border-radius: 100%;
	}

	.f8 {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-left: 25rpx;
		justify-content: space-around;
	}

	.f9 {
		font-weight: blod;
		font-size: 30rpx;
		color: gray;
	}

	.f10 {
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: gray;
	}

	.f11 {
		margin-right: 5rpx;
	}

	.pinglun-report {
		width: 25rpx;
		height: 25rpx;
		/* transform: translateY(-20%) translateX(200%); */
	}

	.f12 {
		margin: 18rpx 0;
	}
</style>